<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生信息表</title>
    <script src="/js/jquery-3.7.1.min.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/list.css">

</head>

<body>
    <!-- 主标题 -->
    <div class="main-title">学生信息表</div>

    <!-- 查询 -->
    <form id="form">
        <div class="form-group">选择查询条件：
            <label for="InputName">
                <select class="form-control" id="searchOp" name="op">
                <option value="id">学生id</option>
                <option value="name">学生姓名</option>
                <option value="no">学生学号</option>
            </select></label>

            <input type="text" class="form-control" id="InputName" placeholder="请输入想要查找的内容">
            <button type="button" class="btn btn-success" onclick="searchStudent()">提交</button>
            <a href="http://localhost:8080/student/list" class="btn btn-success" >刷新重置</a>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  id="addButton" onclick="changeFun()">
                新增学生信息
            </button>
        </div>
    </form>

    <!-- 设计表格 -->
    <table class="table table-striped" id="students">

    </table>
    <!-- 新增学生信息表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">学生信息</h4>
                </div>
                <div class="modal-body">
                    <form id="formStudent">
                        <input hidden="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="no">学号:</label>
                            <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                        </div>
                        <div class="form-group">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                        </div>
                        <div class="form-group">
                            <label for="password">密码:</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <label for="sex">性别:</label>
                            <select class="form-control" id="sex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="age">年龄:</label>
                            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                        </div>
                        <div class="form-group">
                            <label for="score">成绩:</label>
                            <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                        </div>
                        <div class="modal-footer" id="buttons">
                            <button type="submit" class="btn btn-primary"  id="saveButton" onclick="addStudent()">保存</button>
                        </div>
                    </form>

                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script type="text/javascript" src="/pagejs/student/list.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
    <script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
    <script>
        // 表单验证
        $().ready(function (){
            // - 设置表单验证规则和提示
            $("#formStudent").validate({
                debug:true, // 不提交表单
                rules: {
                    no: {// 学号
                        required: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    age: {
                        required: true,
                        min: 16,
                        max: 30
                    },
                    score: {
                        required: true,
                        range: [0, 100]
                    },
                },
                messages: {
                    no: {
                        required: "请输入学生学号",
                        minlength: "学生学号必须由10个数字组成"
                    },
                    name: {
                        required: "请输入学生姓名",
                        minlength: "学生姓名必须至少由两个字符组成"
                    },
                    age: {
                        required: "请输入学生年龄",
                        min: "学生年龄不能小于 10 ",
                        max: "学生年龄不能大于 40 "
                    },
                    score: {
                        required: "请输入学生成绩",
                        min: "学生年龄不能小于 16 ",
                        range: "学生成绩不能在0-100之外"
                    }

                }
            });
            // - 清空表单验证信息和表单数据
            $("#addButton").click(function() {
                $("#formStudent").validate().resetForm();
                $("#formStudent")[0].reset();
            });
        })
        // 查询学生信息
        function searchStudent() {
            var op = document.getElementById("searchOp").value;
            var content = document.getElementById("InputName").value;
            $("#students").bootstrapTable('refresh', {url: "/webapi/student/getby"+ op +"/"+ content});
        }

        // 更改“保存”按钮的函数
        function changeFun(){
            var element = document.getElementById("saveButton");
            element.setAttribute("onclick", "addStudent()");
        }

        // 编辑学生信息
        function editStudent(id){
            // - 清空表单验证信息和表单数据
            $(function() {
                $("#formStudent").validate().resetForm();
                $("#formStudent")[0].reset();
            });
            $("#myModal").modal('show');
            $.ajax({
                url: "/webapi/student/get/" + id,
                type: "get"
            }).done(function (rs){
                $("#id").val(rs.id);
                $("#no").val(rs.no);
                $("#name").val(rs.name);
                $("#password").val("");
                $("#sex").val(rs.sex);
                $("#age").val(rs.age);
                $("#score").val(rs.score);
            })
            // 更改“保存”按钮的函数
            var element = document.getElementById("saveButton");
            element.setAttribute("onclick", "updateStudent()");
        }

        // 保存编辑后的学生信息
        function updateStudent(){
            var data = $("#formStudent").serialize();
            $.ajax({
                url: "/webapi/student/update/",
                method: "post",
                data: data
            }).done(function (){
                // 刷新table里面的数据
                $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
                $('#myModal').modal('hide');
            })
        }

        // 删除学生信息
        function deleteStudent(id){
            if (confirm("是否真的要删除!")){
                $.ajax({
                    url: "/webapi/student/delete/" + id,
                    method: "delete",
                }).done(function (){
                    $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
                })
            }

        }

        // 新增学生信息
        function addStudent(){
            var data = $("#formStudent").serialize();

            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function (){
                $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
                $('#myModal').modal('hide')
            })
        }

    </script>
</body>




